<div>
    <h1>订单</h1>
    <div class="well">
        <table>
            <thead>
            <tr>
                <th class="col-xs-3">类别</th>
                <th class="col-xs-3">产品名</th>
                <th class="col-xs-2">单价</th>
                <th class="col-xs-1">数量</th>
                <th class="col-xs-2">总价</th>
                <th class="col-xs-1">&nbsp;</th>
            </tr>
            </thead>
            <tbody data-bind='foreach: Cart.lines'>
            <tr>
                <td class="col-xs-3">
                    <select class="form-control" data-bind='options: $root.sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'> </select>
                </td>
                <td class="col-xs-3" data-bind="with: category">
                    <select class="form-control" data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select>
                </td>
                <td  class="col-xs-2" data-bind='with: product'>
                    <span data-bind='text: price'> </span>
                </td>
                <td  class="col-xs-1">
                    <input type="text" class="form-control" data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"' />
                </td>
                <td class="col-xs-2">
                    <span data-bind='visible: product, text: subtotal()' > </span>
                </td>
                <td class="col-xs-1">
                    <button class="btn btn-danger" data-bind='click: $root.Cart.removeLine'>
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                </td>
            </tr>
            </tbody>
        </table>

        <br/>

        <div>
            总价: <span data-bind='text: Cart.grandTotal()'> </span>
        </div>

        <br/>

        <div>
            <button class="btn btn-default" data-bind='click: Cart.addLine'>增加产品</button>
            <button class="btn btn-success" data-bind='click: Cart.save'>提交订单</button>
        </div>
    </div>
</div>